<template>
  <!-- 账户变动审核 -->
  <div>
    <!-- 头部搜索 -->
    <div class="header">
      <!-- 时间选择器 -->
      <el-date-picker
        v-model="datePicker"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        size="small"
        value-format="timestamp"
      >
      </el-date-picker>
      <!-- 类型选择 -->
      <el-select v-model="accountType" placeholder="请选择类型" clearable  size="small">
        <el-option
          v-for="type in typeList"
          :key="type"
          :label="type"
          :value="type"
        >
        </el-option>
      </el-select>
      <!-- 选择状态 -->
      <el-select v-model="checkStatus" placeholder="请选择状态" clearable  size="small">
        <el-option
          v-for="status in statusList"
          :key="status"
          :label="status"
          :value="status"
        >
        </el-option>
      </el-select>
      <!-- 填写编号 -->
      <el-input
        v-model="applicantId"
        placeholder="请输入申请人编号"
        size="small"
        clearable
        style="width:200px"
      ></el-input>
      <el-button type="primary" size="small" @click="searchData">搜索</el-button>
    </div>
    <!-- 表格内容 -->
    <div class="content">
        <el-table :data="tableData" size='small' style="width:100%;height=10px">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="userId" label="申请人编号" align="center"></el-table-column>
          <el-table-column prop="applyTime" label="申请时间" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.applyTime | fmtDate_global}}
              </div>
            </template>
            
          </el-table-column>
          <el-table-column prop="applyType" label="申请类型" align="center"></el-table-column>
          <el-table-column  label="变更资金" align="center">
            <template slot-scope="scope">
              <div>
                <span>￥</span>
                <span style="color:red;font-size:16px">{{scope.row.money}}</span>
                <span>元</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="变更原因" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <div>
                <el-tag type="danger" v-if="scope.row.status == '不通过'" size="small"  effect="dark">不通过</el-tag>
                <el-tag type="success" v-else-if="scope.row.status == '通过'" size="small"  effect="dark" >通过</el-tag>
                <el-tag  size="small" v-else effect="dark" >未审核</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == '未审核'">
              <el-button type="text"  size="small" @click="passApply(scope.row.id)">通过</el-button>
              <el-button type="text" size="small" @click="outApply(scope.row.id)">不通过</el-button>
            </div>
          </template>
        </el-table-column>
        </el-table>
        
    </div>
    <!-- 底部分页 -->
    <div class="paginetion">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2,4,6,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {get,post} from "@/utils/request"
export default {
  data() {
    return {
      //头部时间选择器数据
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      datePicker:[],
      // 头部选择框中的内容
      checkStatus: '',
      //状态列表
      statusList:["通过", "不通过", "未审核"],
      // 头部申请人编号的内容
      applicantId: "",
      //类型列表
      typeList:['提现','充值'],
      //头部选择的账户的类型
      accountType:'',
      //表格数据
      tableData:[],
      //当前页
      currentPage:1,
      // 页面大小
      pageSize:10,
      //搜索的数据
      queryData:{},
      // 数据的总数
      total:0,
    };
  },
  computed: {},
  methods: {
    //搜索
    //查询按钮点击事件shijian
    searchData() {
      if(!this.datePicker){
        var data = {
          beginTime:'',
          endTime:'',
          status:this.checkStatus,
          userId:this.applicantId
        }
      }else{
          var data = {
        beginTime:this.datePicker[0],
        endTime:this.datePicker[1],
        status:this.checkStatus,
        userId:this.applicantId
      }
      }
      
      
      for(let i in data){
        if(!data[i]){
          delete data[i]
        }
      }
      this.queryData = data
      this.currentPage = 1
      this.getAccountApplyData()
    },
    // 获取table中的数据
    async getAccountApplyData(){
      let data = {
        page:this.currentPage,
        pageSize:this.pageSize
      }
      data = {...data,...this.queryData}
      let res = await get('/accountApply/pageQueryAccountApply',data)
      this.tableData = res.data.list
    },
    //通过申请
    async passApply(id){
        await get('/accountApply/checkPass',{id})
        this.getAccountApplyData()
    },
    //不通过申请
    async outApply(id){
      await get('/accountApply/checkNoPass',{id})
      this.getAccountApplyData()
    },
    //更改页面大小
    handleSizeChange(val){
      this.pageSize = val
      this.currentPage = 1
      this.getAccountApplyData()
    },
    //换页
    handleCurrentChange(val){
      this.currentPage = val
      this.getAccountApplyData()
    }
  },
  created() {
    //调用获取数据函数
    this.getAccountApplyData()
  },
  mounted() {},
};
</script>
<style scoped>
.head{
  margin-bottom: 30px;
}
.paginetion {
    /* margin-top: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px; */
    margin-top: 10px;
    float: right;
  }
</style>